<template>
  <el-form
    :model="roleForm"
    :rules="roleRules"
    ref="roleForm"
    status-icon
    label-width="100px"
    v-loading="loading"
  >
    <el-form-item label="角色名称" prop="roleName">
      <el-input type="text" v-model="roleForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色说明" prop="description">
      <el-input
        type="textarea"
        v-model="roleForm.description"
        placeholder="写个角色简介吧"
        maxlength="30"
        show-word-limit
      ></el-input>
    </el-form-item>
    <el-form-item style="text-align:center;" v-if="isEdit >= 0">
      <el-button type="danger" @click="onCloseRoleDialog">取消</el-button>
      <el-button type="primary" @click="onSubmitRoleInfo('roleForm')"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import { roleManage, menuManage } from '@/api'
const roleForm = {
  roleName: '',
  description: ''
}
export default {
  name: 'form-role',
  componentName: 'formRole',
  data() {
    return {
      loading: false,
      roleForm: { ...roleForm },
      roleRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    isEdit: Number,
    roleId: String
  },
  watch: {
    roleId(newV, oldV) {
      if (newV) {
        this.getRoleInfo()
      } else {
        this.roleForm = { ...roleForm }
      }
    }
  },
  created() {
    console.log(this.roleId)
    if (this.roleId) this.getRoleInfo()
  },
  methods: {
    async getRoleInfo() {
      try {
        const role = await roleManage.selectRole({ id: this.roleId })
        this.roleForm = role.data
      } catch {
        this.$message.error({
          message: '获取角色信息出错...'
        })
      }
    },
    onCloseRoleDialog() {
      this.$emit('onSubmit', false)
    },
    onSubmitRoleInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitRoleInfo()
        } else {
          return false
        }
      })
    },
    async submitRoleInfo() {
      this.loading = true
      try {
        var role
        if (this.isEdit) {
          role = await roleManage.editRole(this.roleForm)
        } else {
          role = await roleManage.addRole(this.roleForm)
        }
        this.loading = false
        if (role.data != null) {
          this.$message.success({
            message: this.isEdit ? '修改角色成功了' : '添加角色成功了',
            duration: 2000
          })
        } else {
          this.$message.error({
            message: role.message,
            duration: 2000
          })
        }
        this.roleForm = { ...roleForm }

        this.$emit('onSubmit', true)
      } catch {
        this.loading = false
        this.$message.error({
          message: '噢，发现错误，联系后台管理员',
          duration: 2000
        })
        this.roleForm = { ...roleForm }

        this.$emit('onSubmit', false)
      }
    }
  }
}
</script>
